React-[入門篇]- React 起手式 ｜CRA建立React專案

React 搭配CRA

選擇專案的環境：這裡以create-react-app為例(範例練習用) /CRA

• 現在正式使用都是推薦Vite，因為create-react-app不會再更新了，這裡是搭配課程練習，所以我也想體驗看看CRA的環境建置

建立專案資料夾+下載CRA環境

node先切成v18版本：

下載成功會出現這樣：

搭建起來，資料夾會這樣：

打開終端機輸入$npm run start 就出現畫面了

其實CRA都幫我搭建好整個環境，包括node_module和git ，所以只要開啟專案就可見畫面

整理資料夾內容

把src所有檔案都刪除，動手重新起手式！

在src中建立index.js進入點檔案

• CRA搭配的webpack，index.js是所有被編譯的檔案進入點
• 在index.js上方：
  • import React from 'react'
  • import ReactDom from 'react-dom/react'
• 建立根元件App
• 制定App要渲染在頁面的#root區塊內
  
  也可以加入嚴謹模式
  

寫入第二個元件pizza

把pizza食譜相關資料/物件放在App上方

創建一個pizza元件

將這個pizza元件以元素標籤的方式巢狀在App元件內，畫面就顯示出來pizza的內容了，若要重複使用多次pizza的元件，就是以元素標籤的方式重複寫入